<template>
    <view class="page">
        <view class="my-user" :class="[$i18n.locale]">
            <view class="message" @tap="$navigateTo('/my/news/news')">
                <image src="/static/icon_11.png" class="seting-img" mode="" />
                <view class="tip font-16" v-if="user_message_count > 0">{{ user_message_count }}</view>
            </view>
            <image src="/static/icon_12.svg" class="seting-img seting" mode="" @tap="$navigateTo('/my/setting/setting')" />
            <view class="user">
                <view class="user-adv" @tap="$navigateTo('/pages/login')">
                    <image :src="head_pic || '/static/user.svg'" mode="" />
                    <view class="font-26">
                        <view>
                            <view v-if="user.nickname || user.mobile" class="inline ellipsis" style="max-width:250rpx">{{ user.nickname || user.mobile }}</view>
                            <view v-else class="inline ellipsis" style="max-width:250rpx">{{ $t('myPage.loginTips') }}</view>
                            <!-- <view v-if="user.level_name" class="vip font-22 inline">{{ user.level_name }}</view> -->
                        </view>
                        <view v-if="user.user_id">ID：{{ user.user_id }}</view>
                    </view>
                </view>
            </view>
            <view class="user-msg">
                <view @tap="$navigateTo('/my/pay_detail/pay_detail')">
                    <view class="font-34 bold">{{ $t('unit') }} {{ user.seller_amount || '-' }}</view>
                    <view class="font-22">{{ $t('myPage.salesPerformance') }}</view>
                </view>
                <view @tap="$navigateTo('/my/contribution/contribution')">
                    <view class="font-34 bold">{{ user.contribution_points || '-' }}</view>
                    <view class="font-22">贡献值</view>
                </view>
                <view @tap="$navigateTo('/my/my_team/my_team')">
                    <view class="font-34 bold">{{ user.group_count || '-' }}</view>
                    <view class="font-22">我的客戶</view>
                </view>
            </view>
        </view>

        <view class="" v-if="news && news.length" style="margin-top: -60rpx;">
            <uni-notice-bar @getmore="getMore" show-get-more show-icon :more-text="$t('viewMore')" scrollable :text="news[0].title" />
        </view>

        <view class="wallet" :style="{ marginTop: news && news.length ? 0 : '-60rpx' }">
            <view class="my-wallet" style="border: none;padding-bottom: 0;" @tap="$navigateTo('/my/juker/juker')">
                <view class="font-30">{{ $t('myPage.jukerTips') }}</view>
                <view class="font-26"></view>
            </view>
        </view>

        <view class="wallet" v-if="operator">
            <view class="my-wallet" @tap="$navigateTo('/my/operate/operate')">
                <view class="font-30">{{ $t('myPage.operatorTips') }}</view>
                <view class="font-26"></view>
            </view>
            <view class="wallt-msg">
                <view class="msg-item">
                    <view class="wallet-small">
                        <image src="/static/center_name.png"></image>
                        <view class="font-24">{{ operator.operator_title }}</view>
                    </view>
                    <view class="wallet-small">
                        <image src="/static/center_peo.png"></image>
                        <view class="font-24 address-txt">{{ operator.service_address }}</view>
                    </view>
                    <view class="right wallet-small">
                        <image src="/static/center_phone.png"></image>
                        <view class="font-24">{{ operator.service_phone }}</view>
                    </view>
                </view>
            </view>
        </view>

        <view class="service">
            <view class="my-service">
                <view class="font-30">{{ $t('myPage.serviceTips') }}</view>
            </view>
            <view class="service-content">
               <view @tap="$navigateTo('/my/my_wallet/my_wallet')">
                    <image src="/static/icon_4.png" mode="" />
                    <view class="font-24">{{ $t('myPage.myWallet') }}</view>
                </view>
                <view @tap="$navigateTo('/my/gift/gift')">
                    <image src="/static/balance_icon.png"></image>
                    <view class="font-24">{{ $t('myPage.gift') }}</view>
                </view>
                <view @tap="to_invite">
                    <image src="/static/icon_6.png" mode="" />
                    <view class="font-24">{{ $t('myPage.promotionalPoster') }}</view>
                </view>
               <view @tap="$navigateTo('/my/pay_account/pay_account')">
                    <image src="/static/icon_8.png" mode="" />
                    <view class="font-24">{{ $t('myPage.entryAccount') }}</view>
                </view>
                <view @tap="to_agent">
                    <image src="/static/icon_5.png" mode="" />
                    <view class="font-24">{{ $t('myPage.personalCertification') }}</view>
                </view>
               <view @tap="to_identification">
                    <image src="/static/identification.png" mode="" />
                    <view class="font-24">{{ $t('myPage.enterpriseCertification') }}</view>
                </view>
                <view @tap="$navigateTo('/my/address_management/address_management')">
                    <image src="/static/icon_7.png" mode="" />
                    <view class="font-24">{{ $t('myPage.addressManagement') }}</view>
                </view>
            </view>
        </view>
        <view class="foot">
            <view class="tabbar">
                <view class="tabbar-item" :class="[$i18n.locale === item.locale ? 'active' : '']" v-for="(item, index) in versions" :key="index" @click="changeVersion(item, index)">
                    {{ item.value }}
                </view>
            </view>
            <view class="tabbar-fill"></view>
        </view>

        <juker-displace ref="jukerDisplace"></juker-displace>
    </view>
</template>

<script>
    import {
        mapState,
        mapGetters,
        mapMutations
    } from 'vuex'
    export default {
        data() {
            return {
                versions: [{
                        locale: 'zh',
                        value: '国际版'
                    },
                    {
                        locale: 'hk',
                        value: '香港版'
                    }
                ],
                jukerData: [],
                operator: {},
                user_message_count: 0,
                notice: '',
                news: []
            }
        },
        computed: {
            ...mapState(['user', 'isLogin']),
            ...mapGetters(['head_pic'])
        },
        onReady() {
            if (this.$refs.jukerDisplace) {
                this.$refs.jukerDisplace.show()
            }
        },
        onShow() {
            this.init()
            if (this.$refs.jukerDisplace) {
                this.$refs.jukerDisplace.show()
            }
        },
        onPullDownRefresh() {
            this.init()
            setTimeout(() => {
                uni.stopPullDownRefresh()
                uni.showToast({
                    title: this.$t('refreshSuccessfully'),
                    icon: 'none'
                })
            }, 1000)
        },
        methods: {
            ...mapMutations(['setLocale', 'setToken']),
            init() {
                uni.setNavigationBarTitle({
                    title: this.$t('myPage.navigationBarTitle')
                })
                this.getIndexInfo()
            },
            getMore() {
                uni.navigateTo({
                    url: '/index/placard/placard'
                })
            },
            async getIndexInfo() {
                const res = await this.$http('get|api/Index/index')
                this.news = res.result.news
                this.setToken(res.result.session_id)
                // console.log('res.result.session_id', res.result.session_id)
                this.getUserInfo()
            },
            getUserInfo() {
                this.$http('get|api/User/index')
                    .then(res => {
                        this.operator = res.result.operator
                        this.user_message_count = res.result.user_message_count
                        this.$store.commit('login', res.result.users)
                    })
                    .catch(err => {
                        // console.log('getUserInfo err', err)
                    })
            },
            to_juker() {
                if (!this.isLogin) {
                    this.$navigateTo({
                        url: '/pages/login'
                    })
                    return
                }
                this.$navigateTo({
                    url: '/my/juker/juker'
                })
                // if (this.jukerData && this.jukerData.length) {
                //     this.$navigateTo({
                //         url: '/my/juker/juker'
                //     })
                // }
            },
            to_invite() {
                // 推广海报
                if (!this.isLogin) {
                    this.$navigateTo({
                        url: '/pages/login'
                    })
                    return
                }
                this.$http('get|api/User/invite_poster')
                    .then(res => {
                        uni.navigateTo({
                            url: '/index/invite/invite'
                        })
                    })
                    .catch(e => {
                        this.$toastApp(e.msg)
                    })
            },
            // 个人认证
            to_agent() {
                if (!this.isLogin) {
                    this.$navigateTo({
                        url: '/pages/login'
                    })
                    return
                }
                // uni.navigateTo({
                //     url: '/my/shiming/shiming'
                // })
                if (this.user.is_attestation === 0) {
                    uni.navigateTo({
                        url: '/my/shiming/shiming'
                    })
                } else {
                    this.$toastApp(this.$t('myPage.toAgentTips'))
                }
            },
            // 企业认证
            to_identification() {
                if (!this.isLogin) {
                    this.$navigateTo({
                        url: '/pages/login'
                    })
                    return
                }
                this.$http('get|api/user/apply_partner')
                    .then(res => {
                        const user_embassy = res.result.user_embassy
                        if (user_embassy.status === -3) {
                            uni.navigateTo({
                                url: '/my/agent/agent'
                            })
                        } else {
                            this.$toastApp(user_embassy.msg)
                        }
                    })
                    .catch(e => {
                        this.$toastApp(e.msg)
                    })
            },
            changeVersion(version, index) {
                if (this.$i18n.locale !== version.locale) {
                    this.$i18n.locale = version.locale
                    this.setLocale(version.locale)
                    uni.setNavigationBarTitle({
                        title: this.$t('myPage.navigationBarTitle')
                    })
                    this.init()
                }
            }
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #f7f7f7;
    }

    .tabbar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 99;
        background-color: #ffffff;
        height: 100rpx;
        border-top: 1px #fefefe solid;
        font-size: 32rpx;

        .tabbar-item {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            &.active:first-of-type {
                color: var(--theme);
            }

            &.active:last-of-type {
                color: var(--themeHK);
            }
        }

        .tabbar-item::after {
            content: '';
            position: absolute;
            right: 0;
            width: 1px;
            height: 50%;
            background-color: #eee;
        }

        .tabbar-item:last-child::after {
            height: 0;
        }
    }

    .tabbar-fill {
        height: 100rpx;
    }

    .page {
        background-color: #f7f7f7;
        min-height: calc(100vh - 100rpx);
        padding-bottom: 20rpx;
        box-sizing: border-box;
    }

    .my-user {
        height: 478rpx;
        width: 100%;
        background-size: 100% 100%;
        padding: 0 30rpx;
        padding-top: 90rpx;
        box-sizing: border-box;

        &.zh {
            // background-image: url(../static/user_bg.png);
            background: var(--backgroundColor);
        }

        &.hk {
            // background: var(--themeHK);
            background: var(--backgroundColorHK);
            // background-image: url(../static/h5_user_bg.png);
        }

        .message {
            position: absolute;
            right: 100rpx;
            top: 30rpx;

            .tip {
                position: absolute;
                height: 36rpx;
                width: 36rpx;
                background-color: #f4293f;
                border-radius: 50%;
                text-align: center;
                line-height: 36rpx;
                color: #ffffff;
                right: -16rpx;
                top: -16rpx;
            }
        }

        .seting-img {
            height: 40rpx;
            width: 40rpx;
        }

        .seting {
            position: absolute;
            right: 30rpx;
            top: 30rpx;
        }

        .user {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .sign {
                height: 90rpx;
                width: 90rpx;
            }

            .user-adv {
                display: flex;
                justify-content: space-between;
                align-items: center;

                image {
                    height: 120rpx;
                    width: 120rpx;
                    border-radius: 50%;
                }

                >view {
                    padding-left: 20rpx;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    height: 120rpx;
                    color: #ffffff;

                    .vip {
                        min-width: 120rpx;
                        height: 36rpx;
                        background: #ffc700;
                        border-radius: 20rpx;
                        text-align: center;
                        line-height: 36rpx;
                        margin-left: 20rpx;
                        color: var(--theme);
                        // vertical-align: bottom;
                        padding: 0 10rpx;
                    }
                }
            }
        }

        .user-msg {
            margin-top: 50rpx;
            text-align: center;
            display: flex;

            >view {
                flex: 1;
                color: #ffffff;
            }
        }
    }

    .wallet {
        padding: 30rpx;
        box-sizing: border-box;
        border-radius: 10rpx;
        width: 710rpx;
        margin: 0 auto;
        margin-bottom: 20rpx;
        // margin-top: -110rpx;
        background-color: #ffffff;
        position: relative;

        .my-wallet {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            padding-bottom: 20rpx;

            .font-26 {
                color: #b0b0b0;
                padding-right: 34rpx;
                position: relative;
            }

            .font-26::after {
                position: absolute;
                content: '';
                right: 0;
                top: 50%;
                margin-top: -12rpx;
                height: 28rpx;
                width: 28rpx;
                background-image: url();
                background-size: 100%;
            }
        }

        .juker {
            .msg-item {
                padding-bottom: 20rpx;
                margin-bottom: 50rpx;
            }

            .msg-item:last-child {
                margin-bottom: 0;
            }
        }

        .wallt-msg {
            margin-top: 50rpx;

            .msg-item {
                display: flex;
                // height: 100rpx;
                text-align: center;
                // margin-bottom: 50rpx;
                position: relative;

                .msg-item-tips {
                    position: absolute;
                    top: -40rpx;
                }

                >view {
                    flex: 1;
                }

                .font-24 {
                    color: #b3b3b3;
                }

                .font-30 {
                    color: #f75348;
                    font-weight: bold;
                }

                .right {
                    padding-left: 30rpx;
                    box-sizing: border-box;
                }

                &:not(:last-child)::after {
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    background-color: #eee;
                    transform: scaleY(0.5);
                    height: 1px;
                }
            }
        }

        .wallt-msg::after {
            position: absolute;
            width: 650rpx;
            height: 2rpx;
            // background: rgba(242, 242, 242, 1);
            transform: scaleY(0.5);
            content: '';
            left: 50%;
            margin-left: -325rpx;
            top: 240rpx;
        }

        // .wallt-msg::before {
        //     position: absolute;
        //     width: 2rpx;
        //     height: 200rpx;
        //     background: rgba(242, 242, 242, 1);
        //     content: '';
        //     transform: scaleX(0.5);
        //     left: 50%;
        //     top: 50%;
        //     margin-top: -66rpx;
        // }
    }

    .order {
        padding: 30rpx;
        box-sizing: border-box;
        border-radius: 10rpx;
        width: 710rpx;
        margin: 0 auto;
        margin-bottom: 20rpx;
        background-color: #ffffff;
        /* #ifdef APP-PLUS */
        margin-top: 20rpx;
        /* #endif */
        /* #ifdef H5 */
        margin-top: -100rpx;
        /* #endif */

        .my-order {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            padding-bottom: 20rpx;

            .font-26 {
                color: #b0b0b0;
                padding-right: 34rpx;
                position: relative;
            }

            .font-26::after {
                position: absolute;
                content: '';
                right: 0;
                top: 50%;
                margin-top: -12rpx;
                height: 28rpx;
                width: 28rpx;
                background-image: url(../static/more.png);
                background-size: 100%;
            }
        }

        .order-option {
            display: flex;
            justify-content: space-around;
            text-align: center;
            margin-top: 28rpx;

            >view {
                position: relative;

                .tip {
                    position: absolute;
                    width: 36rpx;
                    height: 36rpx;
                    background: rgba(255, 79, 98, 1);
                    border-radius: 50%;
                    color: #ffffff;
                    line-height: 36rpx;
                    right: -4rpx;
                    top: -13rpx;
                }
            }
        }
    }

    .service {
        padding: 0 30rpx;
        box-sizing: border-box;
        border-radius: 10rpx;
        width: 710rpx;
        margin: 0 auto;
        background-color: #ffffff;
        margin-top: 20rpx;

        .my-service {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
            line-height: 90rpx;
        }

        .service-content {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding-bottom: 30rpx;
            box-sizing: border-box;

            >view {
                width: 25%;
                display: flex;
                margin-top: 30rpx;
                flex-flow: column;
                align-items: center;
                justify-content: center;
            }

            image {
                height: 60rpx;
                width: 60rpx;
                margin-bottom: 10rpx;
            }

            .font-24 {
                color: #666666;
            }
        }
    }

    .invite {
        image {
            height: 32rpx !important;
            width: 32rpx !important;
            vertical-align: sub;
            margin-left: 10rpx;
        }
    }

    .wallet-small {
        image {
            width: 48rpx;
            height: 48rpx;
        }

        .address-txt {
            width: 230rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
</style>